<template>
  <div class="flex gap-x-3 items-center">
    <img class="rounded-full" src="./avatar.png" width="52" height="52"/>

    <div class="flex flex-col gap-y-0.5">
      <div class="flex flex-wrap gap-x-2 items-center">
        <div class="important-text">{{ name }}</div>
        <img src="./divider.svg"/>
        <div>{{ age }}</div>
        <img src="./divider.svg"/>
        <div>{{ sex }}</div>
      </div>

      <div class="flex flex-wrap gap-x-2 items-center">
        <div>{{ idNumber }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "PatientInfoCard",
  components: {},
  props: {
    name: String,
    age: String,
    sex: String,
    phone: String,
    height: [Number, String],
    weight: [Number, String],
    marriage: String,
    birthDay: String,
    idNumber: String,
    occupation: String,
    address: String,
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  beforeCreate() {
  },
  created() {
  },
  beforeMount() {
  },
  mounted() {
  },
  beforeUpdate() {
  },
  updated() {
  },
  methods: {},
  beforeUnmount() {
  },
  unmounted() {
  },
});
</script>

<style scoped lang="scss">
div {
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  color: #333;
}

.important-text {
  font-size: 18px;
  font-weight: bold;
}
</style>
